import { useEffect } from 'react';
const AMapSearch = () => {
  const mapContainer = Math.random().toString(36).slice(-8);

  useEffect(() => {
    // AMapLoader.load({
    //   key: '9405f770fde14f10f0bae261b4310e55', // 申请好的Web端开发者Key，首次调用 load 时必填
    //   version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    //   plugins: ['AMap.Geolocation', 'AMap.Marker'],
    // })
    //   .then((AMap) => {
    //     const amap = new AMap.Map(mapContainer, {
    //       // mapcontainer为容器的id
    //       zoom: 15, //初始化地图层级
    //       center: [106.498349, 29.594284], //初始化地图中心点
    //       viewMode: '3D', //是否为3D地图模式
    //     });
    //     const markerContent =
    //       '' +
    //       '<div class="custom-content-marker">' +
    //       '   <img src="https://xtbs.ljsyy.net/resources/qrcode/poi-marker-default.png">' +
    //       '   <div class="close-btn">广电大厦-东门</div>' +
    //       '</div>';

    //     // 标记
    //     const marker = new AMap.Marker({
    //       position: new AMap.LngLat(106.498349, 29.594284),
    //     //   offset: new AMap.Pixel(-30, -10),
    //       // icon: icon, // 添加 Icon 实例
    //       content: markerContent,
    //       label: '重庆广电大厦',
    //     });
    //     // 地图添加标记
    //     amap.add(marker);

    //     // amap.on('click', showInfoClick);
    //   })
    //   .catch((e) => {
    //     console.log(e);
    //   });
  }, []);

  return <div id={mapContainer} style={{ width: '100%', height: '100%' }} />;
};

export default AMapSearch;
